<template>
    <div>
        <div class="filter-container" style="margin-bottom: 10px">
         <el-button @click="add" type="primary" icon="el-icon-plus">添加</el-button>
        </div>
        <el-table :data="list"
            style="width: 99%" 
            border="true"
            stripe="true" 
            :header-cell-style="{background:'#eef1f6',color:'#606266'}" 
            max-height="800px">
          <el-table-column 
            align="center"
            label="序号"
            type="index"
            width="50">
            <template slot-scope="scope">
                {{scope.$index+1}}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="name" label="分类名称"></el-table-column>
          <el-table-column align="center" label="操作" width="200">
            <template slot-scope="scope">
            <el-button type="primary" @click="edit(scope.$index, scope.row)"
                >编辑</el-button
            >
            <el-button type="danger" @click="del(scope.$index, scope.row)"
                >删除</el-button
            >
            </template>
          </el-table-column>
        </el-table>
        <addarea ref="add" @then="cll"></addarea>
        <updataarea ref="updata" @then="cll"></updataarea>
    </div>
</template>

<script>
import { getarea,deletearea } from "@/api/sub/area"
import addarea from "@/components/sub/addarea.vue"
import updataarea from "@/components/sub/updataarea.vue"
export default {
    components:{
        addarea,updataarea
    },
    data(){
        return {
            list:[],
        }
    },
    created(){
        this.getlist()
    },
    methods:{
        del(index,row){
            let that = this;
            this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
            deletearea({
                field:"id",
                op:"=",
                value:row.id
                }).then(()=>{
                    that.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    that.getlist()
                })
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });          
            });
        },
        edit(index,row){
            this.$refs.updata.add(row)
        },
        cll(){
            this.$message({
                type: "success",
                message: "添加成功!",
            });
            this.getlist()
        },
        add(){
            this.$refs.add.add()
        },
        getlist(){
            let that = this;
            getarea({
                field:"id",
                op:">",
                value:"0"
            }).then(res=>{
                console.log(res)
                that.list = res
            })
        }
    }
}
</script>